đ Happy New Year! This is the very first issue of Frontend Focus for 2026, but if you're still feeling a touch reflective, our previous issue looked back over the most popular links shared throughout 2025 â you can see that here if you missed it. With that, let's get into this week's issue. |
|
|
|
|
Introducing CSS Grid Lanes â You may remember a lot of chatter last year about how best to achieve Masonry layouts in CSS. Well, an approach has now been agreed upon, and itâs called Grid Lanes ( Simmons, Etemad, & Stewart (WebKit) |
How to Stop Bots from Abusing Free Trials â Bots exploit trial signups and drain compute. WorkOS Radar uses device fingerprinting, traffic analysis, and behavioral signals to detect and block abuse in real time while integrating cleanly with your existing auth flow through a simple API. WorkOS sponsor |
|
4 CSS Features Every Frontend Developer Should Know In 2026 â Adam returns with his annual picks of what features you now need to be aware of. The 2026 suggestions include knowing how to query scroll states, trimming typographic whitespace, and more. Adam Argyle |
|
đłď¸Â The Results: State of HTML 2025 â Reflections on the year that was. The conclusion highlights how developer interest seems firmly grounded in using practical and functional features over the more fanciful offerings. Plus, any pain points highlighted in the survey results are noted as thankfully being actively worked on. Itâs a good snapshot of where HTML sits today, and always makes for an interesting read. Devographics |
|
|
đ Articles, Opinions &Â Tutorials |
|
đŽÂ The 8 Trends That Will Define Web Development in 2026 â David busts out the crystal ball to make some picks for what the year ahead may look like, touching upon AI development, meta-frameworks, the rise of TypeScript, utility CSS, and more. David Omotayo |
Directional CSS with Scroll-State (Scrolled) â Una takes a look at the new Una Kravets |
|
Take AI Agents and MCP Servers From Playground to Production â Learn identity challenges that prevent AI production-readiness and tips to build secure, scalable AI / MCPÂ systems. Descope sponsor |
|
Chrome DevTools Features I Use All The Time (And Why You Should Too) â Runs through a bunch of features, why they are useful, and how you may want to use them. Good advice, clearly explained, that will no doubt improve your frontend instincts. Keerthana Krishnan |
|
Useful Patterns for Building HTML Tools â In many situations, you donât need a full-on framework to build useful tools â just HTML, JavaScript and CSS in a single file will do the job. Simonâs become a bit of an expert by rolling out many such tools and shares his process and practices here. More please! Simon Willison |
|
A Minimal CSS Starter â Jens doesnât use a CSS reset, but they do reach for a handful of properties with each project. Hereâs a quick look at what those properties/values are and how they help. Jens Oliver Meiert |
|
5 Accessibility Checks to Run On Every Component
|
|
Why Federated Design Systems Keep Failing
|
|
The Cost of Consistency: Avoiding Design System Bottlenecks
|
|
How to Load CSS (Fast)
|
|
đ§° Tools, Code & Resources |
|
Markdown UI: An Open Standard for Rendering Interactive Widgets in Plain Markdown â Useful for easily converting Markdown-based docs to interactive components. You can use any framework and includes widgets for complex forms, interactive charts, etc. Try the demo. Blueprint |
|
Ready to Query Billions of Rows in Milliseconds? â Full PostgreSQL + hypertables, compression, continuous aggregates. Get real-time analytics without the complexity. Tiger Data (creators of TimescaleDB) sponsor |
|
color.js Release v0.6.0 â The wildly popular (over 100 million downloads) standards-compliant color conversion and manipulation library marches on to its eventual 1.0Â release. Lea Verou |
|
color-input: A Modern Color Picker with Support for All Color Spaces â Works as a standalone web component powered by Color.js and Preact Signals for state. Allows you to choose from sRGB, HSL, LAB, LCH, OKLCH, OKLAB, and more. Try it out here. Adam Argyle |
|
GitHub |
|
|
Auld English: Fonts That Simulate Reading in the Olden Days â The paid version has some extras, but the free version includes roman, italic, and the old-style âlong Sâ, which was evidently abandoned around the year 1800. Nick Shinn |
|
ExposedByDefault: What Your Browser Reveals About You â Visit this page and it will scan for information your browser exposes automatically, under two dozen or so categories like audio, graphics, geolocation, media, and so on (AKA your browser fingerprint). NT |
|
safe-npm: Safely Install NPM Packages â Works by reading your dependencies and only installing package versions that have been publicly available for a specified amount of time (90 days is the default). Kevin Lin |
|



